<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #app{
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid content" id="customerCount">
    <div class="toolbar" style="float: right">
        <input type="text" id="selName" placeholder="请输入公司名称">
        <button class="btn btn-primary" @click="selCustomerByName()">查询</button>
        <button class="btn btn-success" onclick="location.href='addCustomer.html'">添加</button>
        <button class="btn btn-danger" id="del-btn" @click="delCustomerAll()">批量删除</button>
    </div>
    <table id="customer-tab" class="table table-hover" style="text-align: center;line-height: 38px">
        <tr>
            <th><input type="checkbox" @click="allCheck" id="checkAll"/></th>
            <th>客户ID</th>
            <th>司机ID</th>
            <th>公司名称</th>
            <th>公司地址</th>
            <th>信誉度</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tr v-for="c in list">
            <td><input class="check" @click="isCheckAll" type="checkbox" :value="c.customerNo"></td>
            <td>{{ c.customerNo }}</td>
            <td>{{ c.customerDriverNo }}</td>
            <td>{{ c.companyName}}</td>
            <td>{{ c.companyAddress }}</td>
            <td>{{ c.companyCredit }}</td>
            <td ><input type="number" style="border:none;text-align:center;background-color:transparent;color: black;" v-model="c.phone"></td>
            <td><!-- 按钮：用于打开模态框
                为了传递数据需要基于js方式（VUE）打开模态框 @click="openUpd(b)"-->
                <button type="button" class="btn btn-primary" @click="updCustomer(c)">
                    修改
                </button>
            </td>
        </tr>
    </table>
    <!--            分页-->
    <div class="pagination-div">
        <!--                无序列表 -->
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);
                   ">共{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script>
    let customerTabVue;
    let map;

    // 初始化表格数据
    $(function () {
        // 调用查询方法 因为是第一次查询所以当前页参数1
        map = selCustomer(1);
        // Vue列表 表格数据
        customerTabVue = new Vue({
            el: '#customerCount',
            data: {
                list: map.customerList,// 展示表格
                page: map,// 用于分页
            },// 参数调用查询函数
            methods: {
                allCheck: function () {
                    eventHub.$emit("allCheck",null);
                },

                isCheckAll: function () {
                    eventHub.$emit("isCheckAll",null);
                },
                cutPage: function (pageNow) {
                    var z=$("#selName").val();
                    customerTabVue.list = selCustomer(pageNow,z).customerList;
                    customerTabVue.page.pageNow=pageNow;
                },
                updCustomer:function(c){
                  $.ajax({
                      type:"post",
                      url:"../Customer/updCustomer",
                      data:c,
                      dataType:"json",
                      success:function (data){
                          alert(data.message);
                          customerTabVue.list = selCustomer(1,"").customerList;
                          customerTabVue.page = selCustomer(1,"");
                      }
                  })
                },
                delCustomerAll: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    if(ids=="") return ;
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../Customer/delCustomerAll",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)
                            customerTabVue.list = selCustomer(1,"").customerList;
                            customerTabVue.page = selCustomer(1,"");
                            eventHub.$emit("closeCheckAll",null);
                        }
                    });
                },
                selCustomerByName:function (){
                    var z=$("#selName").val();
                    customerTabVue.list = selCustomer(1,z).customerList;
                    customerTabVue.page = selCustomer(1,z);
                },
            }

        });
    });


    function selCustomer(pageNow,companyName) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../Customer/selCustomer",
            data: {pageNow: pageNow, pageCount: 5,companyName: companyName },// 携带当前页参数，显示的条数
            dataType: "json",
            async: false,
            success: function (data) {
                // 接受Controller层查询结果
                map = data;
            }
        });
        return map;
    }



</script>
</body>
</html>